<script setup lang="ts">
defineOptions({
  name: "curve"
});
import { ref, onMounted, defineAsyncComponent } from "vue";
import { queryDetectorLedgerCurve } from "@/api/modules/operation";
import search from "./search.vue";
import { formatMissingData } from "@/utils/common";

const echartsCom = defineAsyncComponent(() => import("@/views/common/components/echartsCom/index.vue"));

const loading = ref<boolean>(false);
const dialogVisible = defineModel({ type: Boolean, default: false });
const props = withDefaults(defineProps<{ detectorCodeList: Array<any> }>(), { detectorCodeList: () => [] });
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const echartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
let currentParams: any = {};

const queryDetectorLedgerCurveFn = async () => {
  loading.value = true;
  const { detectorCodeList } = props;
  const params = { ...currentParams, detectorCodeList };
  const res = await queryDetectorLedgerCurve(params, () => {
    loading.value = false;
  });
  formatEchartsData(res.detectorReadValueDTOList);
  loading.value = false;
};

const submitSearchFormHandler = async (form: any, flag: boolean = false) => {
  currentParams = { ...currentParams, ...form };
  await queryDetectorLedgerCurveFn();
  setTimeout(() => {
    !flag && echartsComRef.value.updateOption();
  }, 0);
};

const resetSearchFormHandler = async (form: any) => {
  currentParams = { ...currentParams, ...form };
  await queryDetectorLedgerCurveFn();
  setTimeout(() => {
    echartsComRef.value.updateOption();
  }, 0);
};

const getOptions = (list?: Array<any>): CommonEcharts.CommonEchartsOption => {
  const realList = list.filter(item => !!item?.readValueList?.length);
  if (!realList?.length) return null;
  const legendData = realList.map(item => item.detectorCode);
  const xAxisData = realList[0]?.readValueList?.map(item => item.name);
  const title = {
    text: "侦测器曲线"
  };
  const tooltip = {
    show: true,
    formatter: (params: any) => {
      const { seriesName, name, value } = params;
      return `${seriesName}<br/>${name}：${value.toFixed(2)}`;
    }
    // trigger: "axis"
  };
  const legend = {
    x: "center",
    // y: "bottom",
    bottom: 55,
    type: "scroll",
    width: "92%",
    data: legendData
  };
  const grid = {
    top: 60,
    bottom: 90,
    left: 60,
    right: 30,
    containLabel: true
  };
  const toolbox = {
    feature: {
      saveAsImage: {
        title: "保存为图片"
      }
    }
  };
  const xAxis = {
    type: "category",
    data: xAxisData
  };
  const min = value => {
    if (value.min < 0) {
      return Math.round(value.min * 1.5);
    } else {
      return 0;
    }
  };
  const max = value => {
    return Math.round(value.max * 1.5);
  };
  const yAxis = {
    type: "value",
    min,
    max
  };
  const dataZoom = [
    {
      type: "slider",
      orient: "vertical",
      filterMode: "none",
      left: 10,
      start: 0,
      end: 100
    },
    {
      type: "inside",
      orient: "vertical",
      filterMode: "none",
      start: 0,
      end: 100
    },
    {
      type: "slider",
      orient: "horizontal",
      filterMode: "none",
      start: 0,
      end: 100
    },
    {
      type: "inside",
      orient: "horizontal",
      filterMode: "none",
      start: 0,
      end: 100
    }
  ];
  const series = realList.map(item => {
    const { detectorCode: name = "", readValueList = [] } = item;
    const data = formatMissingData(readValueList.map(item => item.num));
    const type = "line";
    // const stack = "Total";
    return { name, type, data };
  });
  return { title, tooltip, legend, grid, toolbox, xAxis, yAxis, dataZoom, series };
};

const formatEchartsData = (list?: Array<any>) => {
  echartsOptions.value = getOptions(list);
};

const init = async () => {};

onMounted(async () => {
  await init();
});
</script>

<template>
  <px-dialog v-model="dialogVisible" title="生成曲线" width="1200px">
    <div class="curve-content">
      <div class="curve-content-search">
        <search @submit="submitSearchFormHandler" @reset="resetSearchFormHandler" />
      </div>
      <div v-loading="loading" class="curve-content-echarts">
        <echartsCom ref="echartsComRef" :options="echartsOptions" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="dialogVisible = false"> 关闭 </px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
.curve-content {
  .curve-content-search {
    width: 100%;
    margin-bottom: 16px;
  }

  .curve-content-echarts {
    box-sizing: border-box;
    width: 100%;
    height: 500px;
    padding: 10px;
    border: 1px solid #eee;
  }
}
</style>
